<template>
	<view class="container">
		<view class="header">
			<view class="">
				软件名称
			</view>
		</view>
		<view class="mian">
			<u-tabs :list="list1" @change="click" lineColor='#FF575B' style="width: 100%;"></u-tabs>
			<u-empty v-show="show3" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
			<view v-show="!show3">
				<view class=" " v-if="current ==0">
					<!-- 外层盒子 v-if判断   列表是否又数据 或者 下标 -->
					<view class="item_mian" v-for="item in 2" :key="item" @click="gopath">
						<!-- 这一层 v-for -->
						<view class="item_top">
							<text>支付超时</text>
							<text>服务护工：护工名称</text>
						</view>
						<view class="item_centen">
							<view class="centen_text" style="margin: 10px 0;">
								<text
									style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x1
							</view>
							<view class="centen_time">
								<text style="color: #999999; font-size: 12px;">服务时间：2023-09-19 15:00:00</text>
								<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
							</view>
							<view class="centen_btn">
								<view class=" cen_btn">
									删除订单
								</view>
								<view class="cen_btn" style="margin: 0;">
									再次购买
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="" v-if="current ==1">
					<!-- 外层盒子 v-if判断   列表是否又数据 或者 下标 -->
					<view class="item_mian" v-for="item in 2" :key="item" @click="gopath">
						<!-- 这一层 v-for -->
						<view class="item_top">
							<text>待付款</text>
							<text>服务商家：商家名称 </text>
						</view>
						<view class="item_centen">
							<view class="centen_text" style="margin: 10px 0;">
								<text
									style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x2
							</view>
							<view class="centen_time">
								<text style="color: #999999; font-size: 12px;">服务时间：2023-09-19 15:00:00</text>
								<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
							</view>
							<view class="centen_btn">
								<view class=" cen_btn">
									取消订单
								</view>
								<view class="cen_btn" style="margin: 0;">
									立即支付
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 进行中 -->
				<view class="" v-if="current ==2">
					<!-- 外层盒子 v-if判断   列表是否又数据 或者 下标 -->
					<view class="item_mian" v-for="item in topstuats" :key="item" @click="gopath">
						<!-- 这一层 v-for -->
						<view class="item_top">
							<text>{{item}}</text>
							<text>{{item =='商家待接单' ? '服务商家：商家名称':'服务护工：护工名称'}}</text>
						</view>
						<view class="item_centen">
							<view class="centen_text" style="margin: 10px 0;">
								<text
									style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x1
							</view>
							<view class="centen_time">
								<text style="color: #999999; font-size: 12px;">服务时间：2023-09-19 15:00:00</text>
								<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
							</view>
							<view class="centen_btn">
								<view class=" cen_btn" v-if="item == '护工待接单' ||item == '商家待接单'  ">
									<!-- 我这里是用假数据判断的  倒时候你再根据后端的status状态码判断 -->
									取消订单
								</view>
								<view class="cen_btn" style="margin: 0;">
									联系TA
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 待评价 -->
				<view class="" v-if="current ==3">
					<!-- 外层盒子 v-if判断   列表是否又数据 或者 下标 -->
					<view class="item_mian" v-for="item in 2" :key="item" @click="gopath">
						<!-- 这一层 v-for -->
						<view class="item_top">
							<text>待评价</text>
							<text>服务护工：护工名称</text>
						</view>
						<view class="item_centen">
							<view class="centen_text" style="margin: 10px 0;">
								<text
									style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x1
							</view>
							<view class="centen_time">
								<text style="color: #999999; font-size: 12px;">服务时间：2023-09-19 15:00:00</text>
								<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
							</view>
							<view class="centen_btn">
								<!-- <view class=" cen_btn">
								删除订单
							</view> -->
								<view class="cen_btn" style="margin: 0;" @click.stop="gopaths">
									立即评价
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="" v-if="current ==4">
					<!-- 外层盒子 v-if判断   列表是否又数据 或者 下标 -->
					<view class="item_mian" v-for="item in 2" :key="item" @click="gopath">
						<!-- 这一层 v-for -->
						<view class="item_top">
							<text>已完成</text>
							<text>服务护工：护工名称</text>
						</view>
						<view class="item_centen">
							<view class="centen_text" style="margin: 10px 0;">
								<text
									style="font-size: 16px; color:#333; font-weight: 600; margin-right: 5px;">项目名称</text>x1
							</view>
							<view class="centen_time">
								<text style="color: #999999; font-size: 12px;">服务时间：2023-09-19 15:00:00</text>
								<text style="color: #FF575B; font-style: 12px; font-weight: bold;">￥200.00</text>
							</view>
							<view class="centen_btn">
								<view class=" cen_btn">
									删除订单
								</view>
								<view class="cen_btn" style="margin: 0;">
									再来一单
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '进行中'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}],
				topstuats: ['护工待接单', '护工待出发', '护工待到达', '待开始服务', '服务待完成', '商家待接单'], //状态
				current: 0,
				show3: null,
				list:[]
			}
		},
		onLoad() {
			this.getorderlist()
		},
		methods: {
			async getorderlist() {
				const res = await this.$api("/api/order/index", 'post', {
					type: this.current,
					offset: "1"
				}).then((res) => {
					console.log(res);
					console.log(res.data.data);
					this.list = res.data.data.order
					if (res.data.data.order.length == 0) {
						this.show3 = true
					} else {
						this.show3 = false
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			// tab 下表保存
			click(i) {
				console.log(i);
				this.current = i.index
			},
			// 界面跳转 
			gopath() {
				uni.navigateTo({
					url: `/pages/orderlist/orderlist?status=${this.current}`
				})
			},
			gopaths() { //去评价
				uni.navigateTo({
					url: '/pages/appraise/appraise'
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	view {

		box-sizing: border-box;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.container {
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;

		.header {
			width: 100%;
			height: 90px;
			padding: 0 14px 10px 14px;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			background: linear-gradient(to bottom, #FB774B 0%, #FB784D 17%, #F5F5F5 100%, );
			font-size: 16px;
			color: #333333;
			font-weight: 600;

		}
	}

	.mian {
		padding: 15px;
		width: 100%;
		// border: 1px solid red;
		background-color: #F5F5F5;

		.item_mian {
			margin-top: 20px;
			background-color: #fff;
			width: 100%;
			min-height: 175px;
			border-radius: 10px;

			.item_top {
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #DDDDDD;
				padding: 0 15px;
				color: #333333;
				font-size: 14px;
			}

			.item_centen {
				padding: 10px 15px;

				.centen_text {
					color: #FB774B;
					font-size: 12px;
				}

				.centen_time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15px;
				}

				.centen_btn {
					display: flex;
					justify-content: flex-end;

					.cen_btn {
						margin-right: 10px;
						background-color: #FB774B;
						color: #fff;
						padding: 5px 8px;
						border-radius: 999px;
						font-size: 12px;
					}
				}
			}

		}
	}
</style>